<!-- 用户 》 基础 -->

<template>
  <div>
    <EasyDivider text="基础信息" />

    <EasyRow col2>
      <EasyRow col3>
        <FormInput label="姓名" bind="name" :max="20" tipPre="" word2 required />
        <FormPhone label="手机号" word3 third2 required prefix="86">
          <template #suffix>
            <el-button @click="sendVerify">发送</el-button>
          </template>
        </FormPhone>
      </EasyRow>
      <EasyRow col3>
        <FormNum v-bind="ageProps" label="年龄" tip="请输入" rightBtn word2 />
        <FormNum v-bind="ageProps" noLabel />
        <FormSlider v-bind="ageProps" noLabel />
      </EasyRow>
    </EasyRow>

    <!-- 最少三年，最多六年 -->
    <EasyRow col2>
      <FormSliderRange
        label="学历"
        bind="eduList"
        :min="2000"
        :max="2020"
        :minGap="3"
        :maxGap="6"
        :marks="{ 2000: '2000', 2005: '2005', 2010: '2010', 2015: '2015', 2020: '2020' }"
        word2
        required
      />
    </EasyRow>

    <EasyRow>
      <FormIdNo label="证件" bind="idNo" word2 eighth3 required @change="changeIdNo">
        <template #prefix>
          <FormSelect bind="idType" :dict="CORE.DICT.ID_TYPE" :width="50" initFirst noLabel noClear />
        </template>
      </FormIdNo>
      <EasyRow class="eighth5">
        <FormDate label="生日" bind="birth" history format word2 third required />
        <FormSelect v-bind="genderProps" label="性别" :width="180" word2 />
        <FormRadio v-bind="genderProps" isBtn noLabel auto />
        <FormRadio v-bind="genderProps" noLabel auto />
      </EasyRow>
    </EasyRow>

    <EasyRow>
      <FormSlot label="住址" word2>
        <FormSelect label="省份" bind="province" :dict="CORE.DISTRICT.PROVINCE" noLabel third required />
        <FormSelect label="城市" bind="city" :dict="CORE.DISTRICT.CITY[one.province]" noLabel third required />
        <FormSelect label="区县" bind="area" :dict="CORE.DISTRICT.AREA[one.city]" noLabel third required />
      </FormSlot>
      <FormTextarea bind="addr" tip="请输入详细地址" :rows="[2, 5]" word2 required />
    </EasyRow>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'UserBasic',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 年龄属性
     */
    ageProps() {
      return {
        bind: 'age',
        min: 0,
        max: 100,
        required: true,
      }
    },

    /**
     * 性别属性
     */
    genderProps() {
      return {
        bind: 'gender',
        dict: CORE.DICT.GENDER,
        functionType: 'hide',
        functionIndex: 2,
        noClear: true,
        required: true,
      }
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 更新证件号码
     */
    async changeIdNo(value) {
      const gender = value.charAt(17)
      this.one.gender = gender ? (gender % 2 ? 1 : 2) : undefined
    },

    /**
     * 发送验证码
     */
    sendVerify() {
      CORE.MSG.info('发送事件')
    },
  },
}
</script>
